<template>
	<view style="padding-bottom: 80rpx;">
		<view v-if="reduce==1">
			<view class="title">
				<view class="titleTxt" v-if="data.status==10">
					售后中
				</view>
				<view class="titleTxt" v-if="data.status==20">
					卖家通过
				</view>
				<view class="titleTxt" v-if="data.status==61">
					取消售后
				</view>
				<view class="titleTxt" v-if="data.status==62">
					拒绝退款
				</view>
				<view class="titleTxt" v-if="data.status==40">
					等待退款
				</view>
			</view>
		</view>
		<view v-else>
			<view v-if="!data.items[0].afterSaleStatus==0">
				<view class="title">
					<view class="titleTxt" v-if="data.items[0].afterSaleStatus==10">
						售后中
					</view>
					<view class="titleTxt" v-if="data.items[0].afterSaleStatus==20">
						售后成功
					</view>
				</view>
			</view>
			<view v-else>
				<view class="title" v-if="orderType==1">
					<view class="titleTxt" v-if="data.status==1">
						待接单
					</view>
					<view class="titleTxt" v-if="data.status==20">
						待取酒
					</view>
					<view class="titleTxt" v-if="data.status==30">
						已取酒
					</view>
					<view class="titleTxt" v-if="data.status==10">
						待发货
					</view>
					<view class="titleTxt" v-if="data.status==0">
						待付款
					</view>
					<view class="titleTxt" v-if="data.status==40">
						已取消 <text v-if="data.refundStatus==10">(部分退款)</text><text
							v-if="data.refundStatus==20">(全部退款)</text>
					</view>
				</view>
				<view class="title" v-if="orderType==2">
					<view class="titleTxt" v-if="data.status==10">
						待发货
					</view>
					<view class="titleTxt" v-if="data.status==20">
						待收货
					</view>
					<view class="titleTxt" v-if="data.status==30">
						已收货
					</view>
					<view class="titleTxt" v-if="data.status==40">
						已取消 <text v-if="data.refundStatus==10">(部分退款)</text><text
							v-if="data.refundStatus==20">(全部退款)</text>
					</view>
					<view class="titleTxt" v-if="data.status==0">
						待付款
					</view>
				</view>
				<view class="title" v-if="orderType==3">
					<view class="titleTxt" v-if="data.status==1">
						待接单<text style="margin-left: 10rpx; color: #E84E22;">{{data.deskNum}}号桌</text>
					</view>
					<view class="titleTxt" v-if="data.status==10">
						待发货<text style="margin-left: 10rpx; color: #E84E22;">{{data.deskNum}}号桌</text>
					</view>
					<view class="titleTxt" v-if="data.status==20">
						待收货<text style="margin-left: 10rpx; color: #E84E22;">{{data.deskNum}}号桌</text>
					</view>
					<view class="titleTxt" v-if="data.status==30">
						已收货<text style="margin-left: 10rpx; color: #E84E22;">{{data.deskNum}}号桌</text>
					</view>
					<view class="titleTxt" v-if="data.status==40">
						已取消 <text v-if="data.refundStatus==10">(部分退款)</text><text
							v-if="data.refundStatus==20">(全部退款)</text>
					</view>
					<view class="titleTxt" v-if="data.status==0">
						待付款<text style="margin-left: 10rpx; color: #E84E22;">{{data.deskNum}}号桌</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bigBox">
			<view class="goodTitle">
			</view>
			<view class="goodBox">
				<view class="goodLi" v-for="(item,index) in data.items" :key="index">
					<image class="goodLiImg" :src="item.picUrl"></image>
					<view class="goodInfoBox">
						<view class="goodTitleBox">
							<view class="goodTi">
								{{item.goodsName}}
							</view>
						</view>
						<view class="contIntro">
							规格：{{item.specsName}}
						</view>
						<view class="number">
							<view class="price">
								<text style="font-size: 36rpx;" v-if="reduce!=1">￥{{(item.price/100).toFixed(2)}}</text><text
									style="font-size: 20rpx;" v-if="reduce!=1">/件</text>
							</view>
							<view class="priceNumber">
								*{{item.count}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order">
				<view class="orderCode">
					订单编号 <text style="margin-left: 40rpx;">{{data.no}}</text>
				</view>
				<view class="orderCode">
					下单时间 <text style="margin-left: 40rpx;">{{parseTime(data.createTime)}}</text>
				</view>
				<view class="orderCode" v-if="reduce==1">
					申请金额 <text style="margin-left: 40rpx;">{{(data.refundPrice/100).toFixed(2)}}</text>
				</view>
				<view class="orderCode" v-else>
					商品总价 <text style="margin-left: 40rpx;">{{(data.totalPrice/100).toFixed(2)}}</text>
				</view>
				<view class="orderCode">
					会员优惠 <text style="margin-left: 40rpx;">{{(data.vipPrice/100).toFixed(2)}}</text>
				</view>
				<view class="orderCode">
					套餐优惠 <text style="margin-left: 40rpx;">{{(data.discountPrice/100).toFixed(2)}}</text>
				</view>
				<view class="orderCode">
					实际支付 <text style="margin-left: 40rpx;">{{(data.payPrice/100).toFixed(2)}}</text>
				</view>
			</view>
			<view class="butBox" v-if="reduce!=1">
				<view>
					<view class="but but3" v-if="data.status==0" @click="pay">
						付款
					</view>
				</view>
				<view v-if="orderType!=3">
					<view class="but" @click="toReduce" v-if="data.status!=0&&data.status!=40&&data.status!=30&&data.items[0].afterSaleStatus==0&&type!=2">
						申请售后
					</view>
				</view>
				<view class="but but4" @click="toDispatch" v-if="data.status==10&&orderType==3&&data.items[0].afterSaleStatus==0">
					发货
				</view>
				<view class="but but4" @click="receive" v-if="data.status==20&&(orderType==1||orderType==2)&&data.items[0].afterSaleStatus==0">
					收货
				</view>
			</view>
			<view class="butBox" v-else-if="reduce==1&&(orderType==1 || orderType==2)&&data.status==10">
				<view class="but" @click="enterReduce">
					取消售后
				</view>
			</view>
			<view class="butBox" v-if="reduce==1&&orderType==3&&data.status!=61&&data.status!=62&&data.status!=40">
				<view class="but but4" @click="entReduce" v-if="data.status==10">
					同意售后
				</view>
				<view class="but but4" @click="refundReduce" v-else-if="data.status==20">
					确认退款
				</view>
				<view class="but" @click="disagreeReduce">
					拒绝售后
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDetails,
		getReduceDetails,
		receive,
		paySubmit,
		cancelSale,
		agreeSale,
		refundSale,
		disagreeSale
	} from "@/api/wine/wine.js"
	import {
		delivery
	} from "@/api/stOrder/stOrder.js"
	import {
		parseTime
	} from "@/utils/ruoyi"
	import {
		weixinPay
	} from "@/api/weixinPay/weixinPay.js"
	export default {
		data() {
			return {
				id: 0,
				data: {},
				sync: false,
				orderType: 1,
				reduce: 0
			}
		},
		onLoad(e) {
			// console.log(e.type)
			this.id = e.id
			this.orderType = e.type
			// console.log(this.orderType)
			if (e.status == 0) {
				this.sync = true
			}
			if (e.reduce) {
				this.reduce = e.reduce
				this.getReduceData()
			} else {
				this.getData()
			}
		},
		onShow() {
			if(this.reduce==1){
				this.getReduceData()
			}else{
				this.getData()
			}
		},
		methods: {
			//同意售后
			entReduce(){
				let that = this
				let data = {
					id: that.data.id,
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				agreeSale(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('审核成功')
					that.getReduceData()
				})
			},
			//确认退款
			refundReduce(){
				let that = this
				let data = {
					id: that.data.id,
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				refundSale(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('退款提交成功，请等待')
					that.getReduceData()
				})
			},
			//拒绝售后
			disagreeReduce(){
				let that = this
				let data = {
					id: that.data.id,
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				disagreeSale(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('提交成功')
					that.getReduceData()
				})
			},
			//付款
			pay() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data2 = {
					id: that.data.payOrderId,
					channelCode: "wx_lite",
					channelExtras: {
						openid: uni.getStorageSync('openid')
					}
				}
				paySubmit(data2).then(response2 => {
					if (response2.code == 0) {
						let payData = JSON.parse(response2.data.displayContent)
						weixinPay(payData).then(response3 => {
							uni.hideLoading()
							uni.$u.toast('支付成功,请稍后查看')
							setTimeout(() => {
								that.sync = true
								that.getData()
							}, 1000)
						})
					}
				})
			},
			//收货
			receive() {
				let that = this
				let data = {
					id: that.id,
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				receive(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('收货成功')
					that.getData()
				})
			},
			//发货
			toDispatch() {
				let that = this
				let data = {
					id: that.id,
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				delivery(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('发货成功')
					that.getData()
				})
			},
			getData() {
				let that = this
				let data = {
					id: that.id,
					sync: that.sync
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getDetails(data).then(response => {
					uni.hideLoading()
					that.data = response.data
					if (that.data.status != 0) {
						that.sync = false
					}
				})
			},
			getReduceData() {
				let that = this
				let data = {
					id: that.id,
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getReduceDetails(data).then(response => {
					uni.hideLoading()
					that.data = response.data
				})
			},
			//取消售后
			enterReduce(){
				let that = this
				let data = {
					id: that.data.id,
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				cancelSale(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('申请成功')
					that.getReduceData()
				})
			},
			toReduce() {
				console.log(this.orderType)
				uni.navigateTo({
					url: '/pages/reduce/reduce?id=' + this.id + '&type=' + this.orderType
				})
			},
			//时间处理
			parseTime(time) {
				return parseTime(time)
			},
		}
	}
</script>

<style>
	.title {
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		border-top: 2rpx solid #F1F1F1;
	}

	.titleTxt {
		width: 690rpx;
		height: 100rpx;
		margin: 0 auto;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #333333;
	}

	.bigBox {
		width: 690rpx;
		/* height: 600rpx; */
		margin: 20rpx auto 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.boxTitle {
		width: 630rpx;
		height: 50rpx;
		margin: 70rpx auto 12rpx auto;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.titleB {
		width: 630rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 40rpx;
		color: #333333;
	}

	.codeImg {
		width: 316rpx;
		height: 316rpx;
		margin: 40rpx auto;
		display: block;
	}

	.goodTitle {
		width: 630rpx;
		height: 10rpx;
		margin: 30rpx auto;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.titBox {
		width: 630rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
	}

	.titleGood {
		max-width: 590rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.titlIcon {
		width: 10rpx;
		height: 20rpx;
		margin: -8rpx 0 0 20rpx;
	}

	.goodBox {
		width: 630rpx;
		/* height: 200rpx; */
		margin: 0 auto 30rpx auto;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.goodLi {
		width: 630rpx;
		height: 156rpx;
		margin-bottom: 60rpx;
		display: flex;
		justify-content: space-between;
	}

	.goodLiImg {
		width: 156rpx;
		height: 156rpx;
		border-radius: 20rpx;
	}

	.goodInfoBox {
		width: 450rpx;
		height: 150rpx;
		overflow: hidden;
	}

	.goodTitleBox {
		width: 450rpx;
		height: 50rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.goodTi {
		width: 320rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.stutas {
		width: 100rpx;
		height: 50rpx;
		text-align: end;
		font-size: 20rpx;
		color: #F16645;
	}

	.contIntro {
		width: 450rpx;
		height: 60rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
		text-overflow: ellipsis;
		/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.number {
		width: 450rpx;
		height: 40rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
	}

	.price {
		width: 300rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.priceNumber {
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: end;
		font-size: 24rpx;
		color: #999999;
	}

	.order {
		width: 630rpx;
		/* height: 150rpx; */
		border-bottom: 2rpx solid #F1F1F1;
		margin: 0 auto 30rpx auto;
	}

	.orderCode {
		width: 630rpx;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 24rpx;
		color: #999999;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.butBox {
		width: 630rpx;
		height: 60rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: flex-end;
	}

	.but {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 28rpx;
		border: 2rpx solid #999999;
		font-size: 24rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	/* 删除 */
	.but2 {
		border: 2rpx solid red;
		color: red;
	}

	/* 付款 */
	.but3 {
		border: 2rpx solid #F16645;
		color: #F16645;
	}

	/* 发货 */
	.but4 {
		border: 2rpx solid #006200;
		color: #006200;
	}
</style>